<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>TodoList</title>
	<link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="../node_modules/jquery/dist/jquery.min.js"></script>
	<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
	<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

	<style>
		.container-fluid {
			/* border: 1px solid rebeccapurple; */
			height: 100%;
		}

		.col-sm-3 {
			border-right: 1px solid green;
			height: 200px;
		}

		.col-sm-9 {
			/* border: 1px solid green; */
			height: 200px;
		}

		.dayContent {
			height: 50px;
		}

		.todoUL li {
			margin-top: 20px;
		}
	</style>
</head>

<body>
	<div class="container-fluid">
		<br>
		<div class="titleDiv">
			<h2>个人ToDoList</h2>
		</div>
		<br>
		<div class="row">
			<div class="col-sm-3">
				<div class="dayList col-md-6">

				</div>
				<!-- <button type="button" id="addDay" class="btn btn-secondary ">添 加</button> -->
			</div>
			<div class="col-sm-9">
				<div class="dayTodoList">
					<ul class="todoUL"></ul>
				</div>
				<button type="button" id="addTask" class="btn btn-secondary">添 加</button>
			</div>
		</div>
	</div>

</body>

<script>
	const url = `http://localhost:3000`;
	var TodoState = {
		Not: 1, //未完成
		Finish: 2, //已完成
		Delete: 3, //已删除
	};

	// 展示dayList
	$.get(`${url}/getDayList`, function (data, status) {
		console.log(JSON.parse(data));
		let list = [];
		for (let key in JSON.parse(data)) {
			list.push(JSON.parse(data)[key])
		}
		let div = document.getElementsByClassName('dayList')[0]
		for (let item of list) {
			let btn = document.createElement('button')
			var t = document.createTextNode(item);
			btn.appendChild(t)
			btn.setAttribute('type', 'button')
			btn.setAttribute('class', `btn btn-light ${item} dayItem`)
			div.appendChild(btn)
		}
		// console.log(list[list.length - 1]);
		updateTaskView(list[list.length - 1])
	});

	// 添加day
	$('#addDay').on('click', () => {
		$.get('${url}/saveDay', (data, status) => {
			// console.log(data, data.match(/OK/i));
			if (data.match(/OK/i)) {
				alert('以天为单位，今天的已添加，不可重复操作');
				return;
			}
			let div = document.getElementsByClassName('dayList')[0]
			let key = JSON.parse(data)['key']
			if (!key) return;
			key = key.split('-').join('.')
			let btn = document.createElement('button')
			var t = document.createTextNode(key);
			btn.appendChild(t)
			btn.setAttribute('type', 'button')
			btn.setAttribute('class', `btn btn-light ${key} dayItem`)
			div.appendChild(btn)
		})
	})

	// 点击dayItem
	$('.dayList').on('click', '.dayItem', function (e) {
		// alert(this.textContent);
		updateTaskView(this.textContent)
	});

	function updateTaskView(dayKey) {
		$.get(`${url}/getToDoList?day=${dayKey}`, (data, status) => {
			let dataObj = JSON.parse(data)

			// 先移除ul的子元素
			let ul = document.getElementsByClassName('todoUL')[0];
			while (ul.hasChildNodes()) {
				ul.removeChild(ul.firstChild)
			}


			console.log(ul.childNodes);
			for (let key in dataObj) {
				addTaskItem(key, `${dataObj[key]['content']}`);
			}
		});
	}

	function addTaskItem(key, str) {
		let ul = document.getElementsByClassName('todoUL')[0];
		let li = document.createElement('li')
		let div = document.createElement('div');
		div.setAttribute('class', 'form-check');
		let input = document.createElement('input');
		input.setAttribute('class', 'form-check-input')
		input.setAttribute('type', 'checkbox')
		input.setAttribute('id', `id_${key}`)

		let label = document.createElement('label')
		label.setAttribute('class', 'form-check-label')
		label.setAttribute('for', `id_${key}`)
		var newText = document.createTextNode(str);
		label.appendChild(newText);

		div.appendChild(input)
		div.appendChild(label)
		li.appendChild(div)
		ul.appendChild(li)
	}

	$('#addTask').on('click', (e) => {
		var task = prompt("请输入任务", "today task");
		if (task != null && task != "") {
			console.log(task);
			let time = Date.now();
			addTaskItem(time, task)

			$.get(`${url}/saveTask?key=${time}&task=${task}`, (data, status) => {
				console.log(data, status);
			})
		}
	})

</script>

</html>